<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {UploadProps} from 'element-plus'
import {dataList,dataUpdate} from "@/api/project";
import {ElMessage} from "element-plus";
import {useFile} from "@/hooks/web/useFile";
const {action, headers, handlePreview} = useFile()
const form = reactive({
  name: '',
  company_name:'',
  company_address:'',
  id: '',
  logo: '',
  qr_code:'',
  icp: '',
  phone:'',
  fixed_line:'',
  address:'',
  seo_title: '',
  seo_keyword: '',
  seo_descript: ''
})
const saveLoad = ref(false)
const loading  = ref(false)
const handleSuccess = (response) => {
  if (response.code === 0) {
    form.logo = response.data.url
  } else {
    form.logo = ''
  }
}

const handleCodeSuccess = (response) => {
  if (response.code === 0) {
    form.qr_code = response.data.url
  } else {
    form.qr_code = ''
  }
}

const fetchData = async  ()=>{
  loading.value = true
  let res = await dataList()
  loading.value = false
  if (res){
   Object.assign(form,res.data)
  }
}

const handleSave = async ()=>{
  saveLoad.value = true
  let res = await  dataUpdate(form);
  saveLoad.value = false
  if (res){
    ElMessage({message:'保存成功',type:'success'})
  }
}

onMounted(()=>{
  fetchData()
})

</script>

<template>
  <el-row v-loading="loading">
    <el-col :span="24" class="table-wrap">
      <el-form label-width="200px">
        <el-col :span="10">
          <el-form-item label="LOGO">
            <el-upload
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleSuccess"
            >
              <img  class="avatar"  v-if="form.logo" :src="form.logo"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="微信二维码">
            <el-upload
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :headers="headers"
                :on-success="handleCodeSuccess"
            >
              <img  class="avatar"  v-if="form.qr_code" :src="form.qr_code"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="form.name"/>
          </el-form-item>
          <el-form-item label="公司地址" prop="company_address">
            <el-input v-model="form.company_address" placeholder="公司地址"/>
          </el-form-item>
          <el-form-item label="公司名称" prop="company_name">
            <el-input v-model="form.company_name" placeholder="公司名称"/>
          </el-form-item>
          <el-form-item label="ICP备案信息" prop="icp">
            <el-input v-model="form.icp"/>
          </el-form-item>
<!--          <el-form-item label="公司地址" prop="address">-->
<!--            <el-input v-model="form.address"/>-->
<!--          </el-form-item>-->
          <el-form-item label="座机电话" prop="fixed_line">
            <el-input v-model="form.fixed_line"/>
          </el-form-item>
          <el-form-item label="移动电话" prop="phone">
            <el-input v-model="form.phone"/>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="网站SEO标题" prop="seo_title">
            <el-input v-model="form.seo_title" type="textarea" :rows="4"/>
          </el-form-item>
          <el-form-item label="网站SEO关键字" prop="seo_keyword">
            <el-input v-model="form.seo_keyword" type="textarea" :rows="4"/>
          </el-form-item>
          <el-form-item label="网站SEO描述信息" prop="seo_descript">
            <el-input v-model="form.seo_descript" type="textarea" :rows="4"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave" v-loading="saveLoad">保 存</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  height: 98px;
  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  text-align: center;
}
</style>